<template>
	<div class="list">
		<div class="title">调度历史</div>

		<div class="table" v-loading="loading" element-loading-background="rgba(0, 0, 0, 0.3)">
			<el-table
				class="custom-table"
				ref="dataTableRef"
				:data="pageData"
				height="792px"
				:row-style="rowStyle"
				:cell-style="cellStyle"
				highlight-current-row
				show-overflow-tooltip
				:header-cell-style="{ border: '1px solid rgba(27, 178, 224, 0.2)' }"
			>
				<el-table-column label="事件编号" prop="eventNum" min-width="25%" />
				<el-table-column label="事件描述" prop="eventName" min-width="25%" />
				<el-table-column label="调度时间" prop="dispatchTime" min-width="25%" />
				<el-table-column label="当前状态" prop="status" min-width="25%"> </el-table-column>
				<el-table-column label="操作" min-width="25%">
					<template #default="scope">
						<!-- <el-button type="primary" size="small" link @click.stop="showDetail(scope.row.eventId)" style="font-size: 26px; height: 26px"> 调度 </el-button> -->
						<div class="diaoduBtn" @click.stop="showDetail(scope.row)">详情</div>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<!-- <div class="pagenation">
			<el-pagination v-model:current-page="queryParams.pageNum" :page-size="10" background layout="->,total, prev, pager, next, jumper" :total="total" @current-change="handleCurrentChange" />
		</div> -->
		<el-dialog title="" v-model="dialogVisible" width="2300" align-center>
			<!-- <div class="closeBtn" @click="dialogVisible = false"></div> -->
			<Detail :detailId="detailId" :dialogVisible="dialogVisible" />
		</el-dialog>
		<el-dialog title="" v-model="logDialogVisible" width="2300" align-center>
			<LogDetail :detailId="detailId" :dialogVisible="logDialogVisible" />
		</el-dialog>
	</div>
</template>
<script lang="ts" setup>
import { getList, getLogList } from '@/api/illegal'
import { useIllegalStore } from '@/store/modules/illegal'
import LogDetail from './logDetail.vue'
import Detail from './detail.vue'
const useIllegal = useIllegalStore()
const props = defineProps<{
	logVisible: boolean
}>()
const rowStyle = { height: '69px', background: 'transparent' }
const cellStyle = { border: '1px solid rgba(27, 178, 224, 0.2)', fontSize: '26px' }
const loading = ref(false)
// 分页
const total = ref(0)

const handleCurrentChange = (val: number) => {
	queryParams.pageNum = val
	getList(queryParams).then((res) => {
		pageData.value = res.data.list
		total.value = res.data.total
	})
}
const initialQuery = () => ({
	pageNum: 1,
	pageSize: 10,
	parameter: {
		eventTypeId: '44',
		areaCode: '510185',
	},
})
const queryParams = reactive(initialQuery())

// 系统配置表格数据
const pageData = ref([])

// 弹窗
const detailId = ref()
const dialogVisible = ref(false)
const logDialogVisible = ref(false)
const showDetail = (row: any) => {
	if (row.eventId) {
		detailId.value = row.eventId
		dialogVisible.value = true
	} else {
		detailId.value = row.id
		logDialogVisible.value = true
	}
	// detailId.value = id
}
watch(
	props,
	() => {
		// console.log('logV', props)
		loading.value = true
		getLogList()
			.then((res) => {
				pageData.value = res.data
				loading.value = false
			})
			.catch((err) => {
				ElMessage.error(err)
				loading.value = false
			})
	},
	{ immediate: true }
)
</script>
<style lang="scss" scoped>
.list {
	@include frame;
	color: white;
}

.table {
	margin-top: 40px;
	width: 100%;
	height: 764px;
	overflow: scroll;
}
.pagenation {
	width: 100%;
	text-align: right;
}
.el-pagination__total {
	color: white;
}
:deep(.el-pagination__goto) {
	color: white;
}
:deep(.el-pagination__classifier) {
	color: white;
}
:deep(.el-input__wrapper) {
	background-color: transparent;
	input {
		color: white;
		font-size: 22px;
	}
}
// 下拉框
:deep(.el-select__wrapper) {
	min-height: 58px;
	background-color: transparent;
	span {
		color: white;
		font-size: 22px;
	}
}
:deep(.el-range-separator) {
	color: white;
}
:deep(.el-date-editor) {
	width: 600px;
	height: 58px;
}

// 修改table样式
.custom-table {
	// border: 1px solid red;
	background-color: transparent;
	color: white;
	--el-table-border-color: none;
	font-size: 20px;
}

:deep(.el-table th) {
	background: #003352;
	color: rgba(27, 178, 224, 1);
	height: 74px;
	font-size: 24px;
}
:deep(.el-table__body tr.current-row > td) {
	background-color: rgba(255, 255, 255, 0.04) !important; /* 选中行背景色 */
	color: #fff; /* 选中行文字颜色 */
}
:deep(.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell) {
	background-color: rgba(255, 255, 255, 0.04) !important; /* hover背景色 */
}

:deep(.el-dialog) {
	// background-color: transparent !important;
	background-image: url('@/assets/images/illegal/background.png') !important;
	background-size: cover;
	height: 1012px;
	background-repeat: no-repeat;
	// border: 1px solid #77f8ef;
}
:deep(.el-popper.is-dark) {
	font-size: 30px;
}
.closeBtn {
	position: absolute;
	// border: 1px solid red;
	width: 120px;
	height: 45px;
	right: 5px;
	top: -5px;
}
</style>
<style lang="scss">
.el-button:active {
	background: linear-gradient(180deg, rgba(27, 178, 224, 0.1) 100%, rgba(27, 178, 224, 0.4) 0%) !important;
	color: rgba(27, 178, 224, 1) !important;
}
</style>
